<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>


</head>
<body class="layui-layout-body">


<div class="layui-layout layui-layout-admin">


    <!-- 头部区域（可配合layui已有的水平导航） -->
    <div class="layui-header layui-bg-black">
        <div class="layui-logo">学生管理系统</div>
    </div>

    <!--   左侧区域 -->
    <div class="layui-side layui-bg-cyan">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="tab">
                <!--    浮动-->
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">登录</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-nav-item">
                            <a href="/studentLayer/Student_Login/Student_Login">学生登录</a>
                        </dd>
                        <dd class="layui-nav-item">
                            <a href="/studentLayer/Teacher_Login/Teacher_Login">老师登录</a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:void(0)">管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-nav-item">
                            <a href="javascript:void(0)" lay-id="SelectClasses"
                               data-url="/studentLayer/Classes/SelectClasses"
                               onclick="nav(this);">班级管理</a>
                        </dd>

                        <dd class="layui-nav-item">
                            <a href="javascript:void(0)" lay-id="SelectCourse"
                               data-url="/studentLayer/Course/SelectCourse"
                               onclick="nav(this);">科目管理</a>
                        </dd>

                        <dd class="layui-nav-item">
                            <a href="javascript:void(0)" lay-id="SelectTeacher"
                               data-url="/studentLayer/Teacher/SelectTeacher"
                               onclick="nav(this);">老师管理</a>
                        </dd>


                        <dd class="layui-nav-item">
                            <a href="javascript:void(0)" lay-id="SelectStudent"
                               data-url="/studentLayer/Student/SelectStudent"
                               onclick="nav(this);">学生管理</a>
                        </dd>

                    </dl>

                </li>

                <li class="layui-nav-item">
                    <a href="javascript:void(0)" lay-id="cart"
                       data-url="/studentLayer/Shopping/cart"
                       onclick="nav(this);">购物车</a>
                </li>


                <li class="layui-nav-item">
                    <a href="javascript:void(0)" lay-id="Phone"
                       data-url="/studentLayer/Phone/Phone"
                       onclick="nav(this);">手机号码查询</a>
                </li>


                <li class="layui-nav-item">
                    <a href="javascript:void(0)" lay-id="Jielong"
                       data-url="/studentLayer/Jielong/Jielong"
                       onclick="nav(this);">成语接龙</a>
                </li>


                <li class="layui-nav-item">
                    <a href="javascript:void(0)" lay-id="Ow"
                       data-url="/ow_test/Ow/Ow"
                       onclick="nav(this);">省-市-区 三级联动</a>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:void(0)" lay-id="Redenvelopes"
                       data-url="/ow_test/Redenvelopes/Redenvelopes"
                       onclick="nav(this);">抢红包</a>
                </li>


            </ul>
        </div>
    </div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="select" >
            <ul class="layui-tab-title">
<!--                <div style="float: right; margin-right: 10px;">-->

<!--                    <button type="button" onclick="Refresh();" class="layui-btn layui-btn-primary">-->
<!--                        <i class="layui-icon">&#xe669;</i>刷新-->
<!--                    </button>-->

<!--                    <button type="button" onclick="DeleteOther();" class="layui-btn layui-btn-primary">-->
<!--                        <i class="layui-icon">&#xe640;</i>关闭其他标签-->
<!--                    </button>-->
<!--                    <button type="button" onclick="DeleteBtn();" class="layui-btn layui-btn-primary">-->
<!--                        <i class="layui-icon">&#xe640;</i>关闭所有标签-->
<!--                    </button>-->
<!--                </div>-->
            </ul>

            <div class="layui-tab-content" ></div>

        </div>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
</div>


<script type="text/javascript">

    layui.use('element', function () {
        window.element = layui.element;

        window.element.on('tab(select)', function (data) {
            //  console.log(this); //当前Tab标题所在的原始DOM元素
            // var elem  = this;
            // console.log(data.index); //得到当前Tab的所在下标
            // console.log(data.elem); //得到当前的Tab大容器
        });

    });

    function nav(elem) {
        var id = elem.getAttribute("lay-id");
        var url = elem.getAttribute("data-url");
        var name = elem.innerHTML;
        var length = $(".layui-tab-title li[lay-id]").length;
        // console.log(id, url, name);
        //  console.log(length);
        //添加操作




        //标签里面的值小于或者等于0 的话就可以增长
        if (length <= 0) {

            // var h = $('.layui-body').height()-64;
            // //设置tab的高度，
            // $(".layui-tab").css("height",h+"px");



            window.element.tabAdd('select', {
                title: name,
                content: ' <iframe src="' + url + '" frameborder="0"></iframe>',
                id: id,
            });

        } else {

            var istabs = false;//选项卡没有打开
            $(".layui-tab-title li[lay-id]").each(function (index, value) {
                //console.log(index,value.getAttribute("lay-id"));

                if (id == value.getAttribute("lay-id")) {
                    istabs = true;
                }
            })


            if (istabs == false) {
                window.element.tabAdd('select', {
                    title: name,
                    content: ' <iframe src="' + url + '" frameborder="0" height="300px" width="100%"></iframe>',
                    id: id,
                    height:"100%",
                });
            }
        }
        window.element.tabChange('select', id);
        window.element.render('tab');
    }

    //关闭所有标签
    function DeleteBtn() {
        $(".layui-tab-title li").each(function (index, value) {
            //   console.log(value.getAttribute("lay-id"));
            var layid = value.getAttribute("lay-id");
            element.tabDelete('select', layid);
            window.element.render("tab");
        })

    }


    function DeleteOther() {
        var outerHTML = $(".layui-tab-title li[class=layui-this]").prop("outerHTML");
        console.log(outerHTML);
       //var layid = outerHTML.prop("lay-id");
       // console.log(layid);
        window.element.render("tab");
    }


    function Refresh() {
    }




</script>


</body>
</html>